<template>
    <div>
        <div style="margin: 20px ;">
            <div style="margin: 20px 10px">
                <el-input v-model="search " style="width: 20%" clearable placeholder="请输入回复内容查询"></el-input>
                <el-button type="primary" style="margin: 0 10px" @click="load">查询</el-button>
            </div>
            <el-table :data="tableData" stripe style="width: 100%" tooltip-effect="dark">
                <el-table-column prop="id" label="ID" sortable align="center"></el-table-column>
                <el-table-column prop="bookName" label="书本名称" align="center"></el-table-column>
                <el-table-column prop="content" label="内容" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="reply" label="回复" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="gmtCreate" label="留言时间" align="center"></el-table-column>
                <el-table-column prop="gmtModified" label="回复时间" align="center"></el-table-column>

                <el-table-column fixed="right" label=" " width="100">
                    <template #default="scope">
                        <el-button v-if="scope.row.gmtModified===null" @click="handleEdit(scope.row)" type="text"> 回复</el-button>
                        <!--<el-popconfirm title="确定删除吗？" @confirm="handleDelete( scope.row.id)">
                            <template #reference>
                                <el-button type="text" style="color: #ff4268">删除</el-button>
                            </template>
                        </el-popconfirm>-->
                    </template>
                </el-table-column>
            </el-table>
            <div style="margin: 20px 10px">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[5, 10, 20]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"></el-pagination>
            </div>
            <!--弹窗-->
            <el-dialog title="用户信息" v-model="dialogVisible" width="70%">
                <el-form ref="form" :model="form" :rules="rules" label-width="120px">

                    <el-form-item label="书本" prop="bookName">
                        <el-input v-model="form.bookName" style="width: 80%" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="留言" prop="content">
                        <el-input type="textarea" v-model="form.content" style="width: 80%" readonly></el-input>
                    </el-form-item>

                    <el-form-item label="回复" prop="reply">
                        <el-input type="textarea" v-model="form.reply" style="width: 80%"></el-input>
                    </el-form-item>

                    <el-form-item label=" ">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="save()">确 定</el-button>
                    </el-form-item>
                </el-form>

            </el-dialog>

        </div>
    </div>

</template>

<script>
    import request from "../../utils/request";

    export default {
        name: "Message",
        data() {
            return {
                search: "",
                currentPage: 1,
                pageSize: 10,
                total: 0,
                dialogVisible: false,
                tableData: [],
                form:{},
                rules: {
                    reply: [{required: true, message: '请输入', trigger: 'blur'},],

                },
            }
        },
        created() {
            this.load()
        },
        methods: {
            load() {
                request.get("/message/getUserMessage", {
                    params: {
                        pageNum: this.currentPage,
                        pageSize: this.pageSize,
                        search: this.search
                    }
                }).then(res => {
                    console.log(res)
                    this.tableData = res.data.records
                    this.total = res.data.total
                })
            },
            handleEdit(row) {
                console.log(row)
                this.form = JSON.parse(JSON.stringify(row))
                this.dialogVisible = true
            },
            handleSizeChange(pageSize) {
                this.pageSize = pageSize
                this.load();
            },

            handleCurrentChange(pageNum) {
                this.currentPage = pageNum
                this.load()
            },

            save() {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        if (this.form.id) {
                            console.log(this.form)
                            request.put("/message/reply", this.form).then(res => {
                                if (res.code == "0") {
                                    this.$message({
                                        type: "success",
                                        message: "更新成功！"
                                    })
                                    this.dialogVisible = false
                                    this.load()
                                } else {
                                    this.$message({
                                        type: "error",
                                        message: res.msg
                                    })
                                }
                            })
                        } else {
                            this.$message({
                                type: "error",
                                message: "回复失败！"
                            })
                        }
                    }
                })

            },
        }
    }
</script>

<style scoped>

</style>